import '@/assets/css/asideMainAside.css'
import { ref, shallowRef, type Component } from 'vue'
import EditUser from '@/components/editData/editUser.vue'
import EditColumns from '@/components/editData/editColumns.vue'
import EditArticals from '@/components/editData/editArticles.vue'
import { useAsyncAxios } from '@/utils/asyncFuncStore'
import { useModalStore } from '@/stores/modalStore'
import { useCurrActStroe } from '@/stores/currActStore'
import { useRoute } from 'vue-router'
import type { EditUserExport, EditColumnsExport, ErrorData, CurrentUser } from '@/types/loginType'
export default function () {
  const lis = ref([
    { id: 0, item: '专栏管理' },
    { id: 1, item: '文章管理' },
    { id: 2, item: '个人资料' }
  ])
  const editDate = shallowRef<Component>()
  const isActive = ref(0)
  const isShowSave = ref(false)
  const menuClicked = (id: number) => {
    isActive.value = id
    if (id === 0) {
      // 专栏
      editDate.value = EditColumns
    }
    if (id === 1) {
      // 文章
      editDate.value = EditArticals
    }
    if (id === 2) {
      // 个人资料
      editDate.value = EditUser
    }
  }
  function isShowSaveHandle() {
    isShowSave.value = true
  }
  const childRef = ref<EditUserExport | EditColumnsExport | null>(null)
  // 获取表单中的数据
  const route = useRoute()
  const columnId = route.params.id as string
  // 上传至服务器
  async function saveData() {
    const { changeData } = useModalStore()
    if (childRef.value && isActive.value === 0) {
      // 修改专栏
      const { postColumns } = useAsyncAxios()
      const formData = (childRef.value as EditColumnsExport).getColumnFormData()
      // 专栏id
      formData.append('columnId', columnId)
      const { status, data } = await postColumns(formData)
      if (status === 200) {
        changeData({ status, data: { msg: '更新成功' } })
      } else {
        changeData({ status, data: data as ErrorData })
      }
    }
    if (childRef.value && isActive.value === 2) {
      // 修改个人信息
      const { postUserInfo } = useAsyncAxios()
      const formData = (childRef.value as EditUserExport).getUserFormData()
      const { status, data } = await postUserInfo(formData)
      if (status === 200) {
        //
        const { assignCurrUser } = useCurrActStroe()
        assignCurrUser(data as Partial<CurrentUser>)
        changeData({ status, data: { msg: '更新成功' } })
      } else {
        changeData({ status, data: data as ErrorData })
      }
      // 成功更新之后
    }
  }

  return {
    childRef,
    lis,
    editDate,
    isActive,
    isShowSave,
    menuClicked,
    saveData,
    isShowSaveHandle
  }
}
